<template>
  <div>
    <el-form :model="admin" :rules="adminRule" ref="admin" label-width="100px" class="demo-ruleForm">
      <!-- nickname昵称验证 -->
      <el-form-item label="头像" prop="avatar">
        <div v-show="!hideShow" style="width: 178px; height: 178px;display: block;"
             class="el-upload-list el-upload-list--picture-card" >
          <div class="el-upload-list__item" style="width: 178px; height: 178px">
            <img  class="avatar" :src="imageUrl">
            <label class="el-upload-list__item-status-label">
              <i class="el-icon-upload-success el-icon-check"/>
            </label>
            <span class="el-upload-list__item-actions">
                  <span @click="handlePreview()">
                    <i class="el-icon-zoom-in"/>
                  </span>
                  <span class="el-upload-list__item-delete">
                    <i class="el-icon-delete" @click.stop="handleRemove()"/>
                  </span>
                </span>
          </div>
        </div>
        <el-upload
            v-show="hideShow"
            class="avatar-uploader"
            action="http://localhost:19090/user/upload-picture"
            name="picFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="admin.name"></el-input>
      </el-form-item>
      <!-- phone电话号码验证 -->
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="admin.password"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio v-model="admin.gender" label="M">男</el-radio>
        <el-radio v-model="admin.gender" label="W">女</el-radio>
      </el-form-item>

      <!-- phone电话号码验证 -->
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="admin.phone"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(admin)">修改</el-button>
        <el-button @click="resetForm(admin)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  created() {
    this.getCurrentAdminInfo();

  },
  data() {
    return {
      admin:{},

      adminRule: {
        avatar: [
          {required: true, message: "请输入昵称", trigger: "change"},
        ],
        name: [
          {required: true, message: "请输入昵称", trigger: "change"},
        ],
        phone: [
          {required: true, message: "请输入电话", trigger: "change"},
        ],
        gender: [
          {required: true, message: "请选择性别", trigger: "change"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "change"},
        ],


      },

      imageUrl: '',
      uploadAvatar: '',
      hideShow: true,
      dialogImageUrl: '',
      dialogVisible: false,


    };
  },
  methods: {
    handleRemove() {

      this.axios.get("/user/remove-picture?pictureName=" + this.imageUrl).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
        } else {
          this.$message.error(data.message);
        }
      });
      this.hideShow = !this.hideShow;
      this.imageUrl = '';

    },
    handlePreview() {
      this.dialogImageUrl = this.imageUrl;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      console.log("res:" + res.data)
      this.imageUrl = res.data;
      this.admin.avatar = this.imageUrl;
      this.hideShow = false;

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === "image/png";

      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
      }

      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      return isJPG && isLt5M;
    },

    getCurrentAdminInfo() {
      this.axios.get("/admin/personal").then(({ data }) => {
        if(data.state == 20000){
          this.admin = data.data
          this.imageUrl = data.data.avatar;
          this.hideShow = false;
        }else {
          this.$message.error(data.message);
        }

      })
    },

    submitForm(admin){
      this.$refs["admin"].validate((valid) => {
        if (valid) {

          this.axios.post("/admin/update-info", this.admin).then(({data}) => {
            if (data.state == 20000) {
              this.$message.success(data.message);
              location.reload();//上传成功后自动刷新页面，刚上传的头像显示出来
            } else {
              this.$message.error(data.message);
            }

          })
        } else {
          this.$message.error("提交失败");
          return false;
        }

      })

    },

    resetForm(admin){
      this.getCurrentAdminInfo();

    }

  },

}
</script>

<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB W3", "Hiragino Sans GB",
  "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
